<template>
  <div class="OTableColumnDictColor_container" v-if="title">
    <div class="box">{{ title }}：</div>
    <div v-for="item in cssClass" class="box">
      <div class="color" :style="item.style"></div>
      <span class="dictLabel">{{ item.dictLabel }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'olTableColumnDictColor',
  props: {
    columns: {default: []}
  },
  data() {
    return {
      cssClass: [],
      title: undefined,
    }
  },
  created() {
    for (let column of this.columns) {
      if (column.params && column.params.cssClass) {
        let cssClass = [];
        for (let obj of Object.keys(column.params.cssClass)) {
          let st = column.params.cssClass[obj];
          this.title = column.title;
          let style = 'background-color:' + st['backgroundColor'] + ";color:" + st['color'];
          cssClass.push({
            dictValue: obj,
            dictLabel: column.params.dictValueLabel[obj],
            style: style
          })
        }
        this.cssClass = cssClass
      }
    }

  }
}
</script>

<style lang="less" scoped>
.OTableColumnDictColor_container {
  float: left;
  font-size: 11px;
  color: #000000;

  .box {
    float: left;
    display: flex;
    justify-content: center; /* 水平居中，如需 */
    align-items: center; /* 垂直居中 */
  }
}

.text-with-line {
  text-align: center; /* 文字居中 */
  position: relative; /* 相对定位 */
  padding-top: 10px; /* 文字与横线之间的间隔 */
}

.text-with-line::after {
  content: ""; /* 伪元素内容为空 */
  position: absolute; /* 绝对定位 */
  left: 0; /* 横线左边界与div左边界对齐 */
  right: 0; /* 横线右边界与div右边界对齐 */
  top: 0; /* 横线顶部与div内部内容顶部对齐 */
  height: 1px; /* 横线高度 */
  background: black; /* 横线颜色 */
  transform: scaleY(0.5); /* 将线性缩小一半，看起来更细 */
}

.dictLabel {
  margin-right: 5px;
  float: left;
}

.color {
  float: left;
  margin-right: 5px;
  text-align: center;
  width: 12px;
  height: 12px;
  border-radius: 10px;
}
</style>
